<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white">
			<block slot="content">{{$t('tabBar.car')}}</block>
		</cu-custom>
		<u-checkbox-group v-model="checkboxValue1" @change="groupCheckChange">
			<view style="margin: 20rpx 25rpx;display: grid;gap: 20rpx;width: 100%;">
				<view class="flex flex-direction bg-white padding" style="border-radius: 15rpx;"
					v-for="(item,index) in carList" :key="index">
					<view class="flex justify-between align-center">
						<u-checkbox :name="item.id" :label="$t('car.select')" activeColor="#06C168"
							shape="circle"></u-checkbox>
						<image src="@/static/img/delShop.png" style="width: 24rpx;height: 24rpx;"
							@tap.stop="handleDel(item.goods_id,index)"></image>
					</view>
					<view class="flex margin-top">
						<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
							class="radius-xs flex-shrink">
						</image>
						<view class="flex flex-direction font-400 margin-left justify-between flex-sub">
							<text class="font-bold text-black text-df one-line">{{item.name}}</text>
							<text class="text-xl text-red font-bold">${{item.price}}</text>
							<view class="flex justify-between align-center">
								<view class="flex flex-direction">
									<text class="text-sm text-gray font-400 one-line"
										style="text-decoration-line: line-through;">{{$t('order.supermarketPrice')}}:${{item.supermarket_price}}</text>
									<text class="text-sm text-gray font-400 one-line"
										style="text-decoration-line: line-through;">{{$t('order.marketPrice')}}:${{item.market_price}}</text>
								</view>
								<u-number-box v-model="item.num" integer bgColor="#ffffff"
									@blur="handleonBlur($event,item.goods_id)"
									@change="handleChange($event,item.goods_id)">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
					</view>
				</view>
				<section class="empty" v-if="!carList.length">
					<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" :text="$t('filed.empty')" />
				</section>
			</view>
		</u-checkbox-group>
		<view class="hotShop flex flex-direction">
			<view class="flex justify-between align-center">
				<text class="font-bold text-xl text-black">{{$t('car.handleLike')}}</text>
				<view class="flex align-center" @tap.stop="likeLists">
					<u-icon name="reload" size="16" color="#888888"></u-icon>
					<text class="text-df text-gray font-400 margin-left-xs">{{$t('car.refresh')}}</text>
				</view>
			</view>
			<view class="grid gap margin-top-sm">
				<view class="bg-white radius-xs padding-sm flex align-center"
					style="box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.15);" v-for="(item,index) in likeList"
					:key="index" @tap.stop="helper.routerNav('/pages/home/shopDetail',{id:item.id})">
					<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
						class="radius-xs flex-shrink" />
					<view class="grid flex-sub margin-left-sm" style="gap: 8rpx;">
						<text class="font-bold text-black text-df one-line">{{item.name}}</text>
						<text class="text-xs text-gray font-400 one-line">{{item.introduce}}</text>
						<text class="text-xl text-red font-bold">${{item.price}}</text>
						<view class="flex align-center text-gray text-xs font-400">
							<text>{{$t('home.mothSallNum')}}:{{item.total_sall_num}}</text>
							<text class="margin-left">{{$t('group.comment')}}:{{item.comment_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="100" bgColor="#f1f1f1"></u-gap>
		<view class="payOrder flex justify-between bg-white align-center">
			<u-checkbox-group v-model="isSelectAll" @change="SelectAllChange">
				<u-checkbox :label="$t('car.allSelect')" name="selectAll" activeColor="#06C168" shape="circle" />
			</u-checkbox-group>
			<view class="flex align-center">
				<view class="money flex margin-right-sm" style="align-items: baseline;">
					<text class="text">{{$t('order.total')}}:</text>
					<text class="money">${{totalMoeny.toFixed(2)}}</text>
				</view>
				<view class="submit" @tap.stop="buyOrder">
					<text class="title">{{$t('car.goBuy')}}</text>
				</view>
			</view>
		</view>
		<tabBar :currentTabbar="2" :placeholder="true" />
	</view>
</template>
<script>
	import {
		cartList,
		cartDel,
		changeNum,
		likeLists
	} from '@/apis'
	import tabBar from '@/components/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				carList: [],
				checkboxValue1: [],
				isSelectAll: [],
				totalMoeny: 0,
				likeList: []
			}
		},
		onShow() {
			this.cartList()
			this.likeLists()
		},
		methods: {
			async likeLists() {
				const res = await likeLists()
				this.likeList = res
			},
			buyOrder() {
				if (!this.checkboxValue1.length) {
					this.helper.showToast(this.$t('list.empty'))
					return
				}
				let goods_ids = []
				this.checkboxValue1.forEach(item => {
					let shopInfo = this.carList.find(carItem => carItem.id == item)
					goods_ids.push({
						goods_id: shopInfo.goods_id,
						num: shopInfo.num
					})
				})
				this.helper.routerNav('/pages/home/confirmOrder', {
					goods_ids: JSON.stringify(goods_ids),
					cart_ids: this.checkboxValue1.join(',')
				})
			},
			async handleonBlur(event, goods_id) {
				await changeNum({
					num: event.value,
					goods_id
				})
				this.checkboxValue1 = []
				this.isSelectAll = []
				this.totalMoeny = 0
			},
			async handleChange(event, goods_id) {
				await changeNum({
					num: event.value,
					goods_id
				})
				this.checkboxValue1 = []
				this.isSelectAll = []
				this.totalMoeny = 0
			},
			async cartList() {
				const res = await cartList()
				this.carList = res
			},
			async handleDel(id, index) {
				this.carList.splice(index, 1)
				this.checkboxValue1 = []
				this.isSelectAll = []
				this.totalMoeny = 0
				await cartDel({
					goods_id: id
				})
				this.helper.showToast(this.$t('message.success'))
			},
			SelectAllChange(n) {
				if (this.isSelectAll.length != 0) {
					this.checkboxValue1 = []
					this.totalMoeny = 0
				} else {
					let money = 0
					this.carList.forEach(item => {
						money += item.price * item.num
						this.checkboxValue1.push(item.id)
					})
					this.totalMoeny = money
				}
			},
			groupCheckChange(e) {
				this.totalMoeny = 0
				let money = 0
				this.carList.forEach(item => {
					if (e.includes(item.id)) {
						money += item.price * item.num
					}
				})
				this.totalMoeny = money
				if (e.length == this.carList.length) {
					this.isSelectAll = ['selectAll']
				} else {
					this.isSelectAll = []
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.hotShop {
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 34rpx 25rpx;
		margin-top: 20rpx;
		background: linear-gradient(180deg, #C5E8D7 0%, #FFFFFF 10%);
	}

	.payOrder {
		box-shadow: 0rpx -8rpx 17rpx 1rpx rgba(152, 152, 152, 0.15);
		border-radius: 55rpx;
		left: 25rpx;
		right: 25rpx;
		position: fixed;
		padding: 18rpx 30rpx;
		bottom: 200rpx;

		.money {
			.text {
				font-family: PingFang;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}

			.money {
				font-family: PingFang;
				font-weight: 500;
				font-weight: bold;
				font-size: 36rpx;
				color: #E42622;
			}
		}

		.submit {
			width: 218rpx;
			display: flex;
			justify-content: center;
			background: #06C168;
			border-radius: 38rpx;
			padding: 15rpx 0;

			.title {
				font-family: PingFang;
				font-size: 30rpx;
				color: #000000;
			}
		}
	}


	.minus {
		width: 22px;
		height: 22px;
		border: 1rpx solid #E6E6E6;
		border-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 0;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #06C168;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>